<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsx小练习</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

</head>

<body>
    <div id="test"></div>

    <script type="text/babel">

        /**
         * 一定要注意 【JS 表达式】 与 【JS 语句（代码）】的区别
         *  1、表达式的定义：由运算符与操作数组成
         *  2、简单理解，有值就是表达式，或者说能打印出值就是表达式。
         *  3、表达式可以产生一个值，可以放在任何一个需要值的地方
         *  如下都是表达式：
         *  a
         *  a+b
         *  demo(1)
         *  arr.map() 
         *  function test (){}
         *  ...
         *  4、语句（代码）
         *  if(){}
         *  switch(){case:xxx}
         *  for(){}
         *  ...
         */
        const data = ['a', 'b', 'c'];

        const VDOM = (
            <h2 id="new">
                {
                    data.map(
                        (item, index) => {
                            return <li key={index}>{item}</li>
                        }
                    )
                }
            </h2>
        )

        ReactDOM.render(
            VDOM,
            document.getElementById('test')
        )
    </script>




</body>

</html>